<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>
        
        
        <script src="js/jquery.js"></script>
        <script src="js/highcharts.js"></script>
        <script src="js/data.js"></script>
        <script src="js/column.js"></script>	

        <script type="text/javascript">
            $(function() {
                $('#container').highcharts({
                    data: {
                        table: document.getElementById('datatable')
                    },
                    chart: {
                        type: 'column'
                    },
                    title: {
                        text: 'Data extracted from a HTML table in the page'
                    },
                    yAxis: {
                        allowDecimals: false,
                        title: {
                            text: 'Units'
                        }
                    },
                    tooltip: {
                        formatter: function() {
                            return '<b>' + this.series.name + '</b><br/>' +
                                    this.y + ' ' + this.x.toLowerCase();
                        }
                    }
                });
            });
        </script>
    </head>
    <body>

        <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

        <table id="datatable">
            <thead>
                <tr>
                    <th></th>
                    <th>Jane</th>
                    <th>John</th>
                    <th>Megend</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th>Apples</th>
                    <td>3</td>
                    <td>4</td>
                    <td>8</td>
                </tr>
                <tr>
                    <th>Pears</th>
                    <td>2</td>
                    <td>6</td>
                    <td>5</td>
                </tr>
                <tr>
                    <th>Plums</th>
                    <td>5</td>
                    <td>20</td>
                    <td>1</td>
                </tr>
                <tr>
                    <th>Bananas</th>
                    <td>1</td>
                    <td>1</td>
                    <td>5</td>
                </tr>
                <tr>
                    <th>Oranges</th>
                    <td>2</td>
                    <td>4</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
